<template>
    <el-dialog class="dialog" :destroy-on-close="true" :title="title" :visible.sync="isShow" :close-on-click-modal="false"
        @close="onDialogClose">
        <el-form ref="form" label-width="auto" class="form" :model="formData" :rules="rules">
            <el-form-item label="班次名称:" prop="bc_name">
                <el-input type="textarea" placeholder="请输入班次名称" v-model="formData.bc_name" clearable resize="none"
                    maxlength="20" :autosize="{ minRows: 1, maxRows: 1 }" width="217px"></el-input>
            </el-form-item>
            <el-form-item label="每日打卡次数" prop="dk_num">
                <el-select v-model="formData.dk_num" placeholder="请选择每次打卡次数">
                    <el-option v-for="item in dkTimesData" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="早班上班时间:" prop="dk01_in_time">
                <el-time-select placeholder="早班上班时间" v-model="formData.dk01_in_time" :picker-options="{
                    start: '00:00',
                    step: '00:30',
                    end: '23:30'
                }">
                </el-time-select>
            </el-form-item>
            <el-form-item label="早班下班时间:" prop="dk01_out_time" >
                <el-time-select placeholder="早班下班时间" :disabled="formData.dk01_in_time === ''" v-model="formData.dk01_out_time" :picker-options="{
                    start: '00:00',
                    step: '00:30',
                    end: '23:30',
                    minTime: formData.dk01_in_time
                }">
                </el-time-select>
            </el-form-item>
            <el-form-item label="休息开始时间:" prop="dk01_xxs_time"  v-if="formData.dk_num == 2">
                <el-time-select placeholder="休息开始时间" :disabled="formData.dk01_in_time === ''" v-model="formData.dk01_xxs_time" :picker-options="{
                    start: '00:00',
                    step: '00:30',
                    end: '23:30',
                    minTime: formData.dk01_in_time,
                    maxTime: formData.dk01_out_time
                }">
                </el-time-select>
            </el-form-item>
            <el-form-item label="休息结束时间:" prop="dk01_xxe_time" v-if="formData.dk_num == 2">
                <el-time-select placeholder="休息结束时间" :disabled="formData.dk01_xxs_time === ''"  v-model="formData.dk01_xxe_time" :picker-options="{
                    start: '00:00',
                    step: '00:30',
                    end: '23:30',
                    minTime: formData.dk01_xxs_time,
                    maxTime: formData.dk01_out_time
                }">
                </el-time-select>
            </el-form-item>
            <el-form-item label="中班上班时间:" prop="dk02_in_time" v-if="formData.dk_num > 2">
                <el-time-select placeholder="中班上班时间" :disabled="formData.dk01_out_time === ''" v-model="formData.dk02_in_time" :picker-options="{
                    start: '00:00',
                    step: '00:30',
                    end: '23:30',
                    minTime: formData.dk01_out_time,
                    maxTime: formData.dk02_out_time
                }">
                </el-time-select>
            </el-form-item>
            <el-form-item label="中班下班时间:" prop="dk02_out_time" v-if="formData.dk_num > 2">
                <el-time-select placeholder="中班下班时间" :disabled="formData.dk02_in_time === ''"  v-model="formData.dk02_out_time" :picker-options="{
                    start: '00:00',
                    step: '00:30',
                    end: '23:30',
                    minTime: formData.dk02_in_time,
                    maxTime: formData.dk03_in_time
                }">
                </el-time-select>
            </el-form-item>
            <el-form-item label="晚班上班时间:" prop="dk03_in_time" v-if="formData.dk_num > 4">
                <el-time-select placeholder="晚班上班时间" :disabled="formData.dk02_out_time === ''"   v-model="formData.dk03_in_time" :picker-options="{
                    start: '00:00',
                    step: '00:30',
                    end: '23:30',
                    minTime: formData.dk02_out_time,
                    maxTime: formData.dk03_out_time
                }">
                </el-time-select>
            </el-form-item>
            <el-form-item label="晚班下班时间:" prop="dk03_out_time" v-if="formData.dk_num > 4">
                <el-time-select placeholder="晚班下班时间" :disabled="formData.dk03_in_time === ''"  v-model="formData.dk03_out_time" :picker-options="{
                    start: '00:00',
                    step: '00:30',
                    end: '23:30',
                    minTime: formData.dk03_in_time
                }">
                </el-time-select>
            </el-form-item>
            <el-form-item label="班次生效日期:" prop="effect_time" v-if="isEdit">
                <el-date-picker v-model="formData.effect_time" type="date" placeholder="请选择生效日期" value-format="yyyy-MM-dd"
                    :picker-options="{
                        disabledDate(time) {
                            return time.getTime() < Date.now();
                        }
                    }">
                </el-date-picker>

            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="onDialogClose">取 消</el-button>
            <el-button class="btn-confirm" @click="onSubmit">
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
@Component({
    name: "kqDoorEdit",
    mixins: [mixinDialogForm]
})
export default class kqDoorEdit extends Vue {
    @Action("kqBc/add") itemAdd: any;
    @Action("kqBc/edit") itemEdit: any;



    editInit(data: any) {
        const me = this as any;
        data.dk_num = data.dk_num.toString();
        data.old_num = data.dk_num.toString();
        me.formData = Object.assign({}, me.formData, data);

    }



    dkTimesData: any = [
        { label: '2次', value: '2' },
        { label: '4次', value: '4' },
        { label: '6次', value: '6' }
    ];
    // 表单数据
    formData: any = {
        bc_name: "",
        dk_num: "2",
        old_num: "2",
        dk01_in_time: "",
        dk01_out_time: "",
        dk01_xxs_time: "",
        dk01_xxe_time: "",
        dk02_in_time: "",
        dk02_out_time: "",
        dk03_in_time: "",
        dk03_out_time: "",
        effect_time: ""
    };
    roledata: any = [];
    // 表单验证
    rules: any = {
        bc_name: [
            {
                required: true,
                message: "请输入班次名称"
            }
        ],
        dk_num: [
            {
                required: true,
                message: "请选择每次打卡次数"
            }
        ],
        dk01_in_time: [
            {
                required: true,
                message: "请选择早班上班打卡时间"
            }
        ],
        dk01_out_time: [
            {
                required: true,
                message: "请选择早班下班打卡时间"
            }
        ],
        dk01_xxs_time: [
            {
                required: true,
                message: "请选择中途休息开始时间"
            }
        ],
        dk01_xxe_time: [
            {
                required: true,
                message: "请选择中途休息结束时间"
            }
        ],
        dk02_in_time: [
            {
                required: true,
                message: "请选择中班上班打卡时间"
            }
        ],
        dk02_out_time: [
            {
                required: true,
                message: "请选择中班下班打卡时间"
            }
        ],
        dk03_in_time: [
            {
                required: true,
                message: "请选择晚班上班打卡时间"
            }
        ],
        dk03_out_time: [
            {
                required: true,
                message: "请选择晚班下班打卡时间"
            }
        ],
        effect_time: [
            {
                required: true,
                message: "请选择班次生效日期"
            }
        ]
    };
    @Action('kqBc/all') getAll: any;
    successAfter() {
        // 刷新列表
        this.getAll(true);
    }

    // 标题
    get title() {
        return (this as any).isEdit ? "编辑考勤班次" : "新增考勤班次";
    }

}
</script>
<style lang="scss" scoped>
.right {
    width: 50%;
    padding: 15px 0 10px 20px;

    .el-tree {
        margin-top: 5px;
        padding: 10px;
        height: 40vh;
        overflow: auto;
    }
}
</style>